前端学习圈

js-01 javascript 初始

一、js发展历史：

ECMAScript（Europe Computer Manufacture Association)；语法，定义变量

DOM（Document Object model） ; 文档对象模型；

BOM（Brower Object model）; 浏览器对象模型；

javascript是一个单线程、非阻塞、异步、解释性脚本语言；

V8是chrome里的javascript运行环境；

  1. javascript 是解释性脚本语言；
  • javascript原名不是JavaScript，而是Livescript；
  • js是用来解决用户和浏览器交互的问题；
  • ECMAScript是JavaScript的规范，JavaScript是ECMAScript的实现；
  • ECMAScript方言：Jscript、ActionScript；
  1. Javascript的创造者Netscape（网景公司）

二、script引入方法

  1. 行间样式，在标签内直接写onclick点击事件。
<div onclick = "alert('点击')";></div>

  1. 内部样式，用script标签，写入事件，一般写在body结束标签之前。

  2. 外部样式，创建一个js文件，在html引入<script src="">，src输入地址；

放置位置：

当浏览器解析script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始，也就是说，如果想在首屏渲染快，就越不应该在首屏就加载JS文件，所以都建议将script标签放在body结束标签之前的原因；

也可以在script标签上添加defer属性，规定是否对脚本执行进行延迟，直到页面加载为止；

<script defer='defer'>

也可以添加async属性，立即加载脚本，不影响其他的顺序 ；

defer和async只对外部脚本有效

三、基本使用语法

  1. 注释

单行注释：// 多行注释：/**/ 。

单行注释一般用在一行代码上，多行注释一般用在函数上边；

";"和回车表示一条语句的结束，

  1. js字符串类型可以是双引号也可以是单引号；

理解：

  1. 在script的标签中有错误的代码，错误后面的代码都不执行；

  2. 一个页面可以使用多个script标签，在一对script的标签里写错了代码，不会影响到其他script标签的代码；

  3. script的标准写法：<script type="text/javascript">或者写language="JavaScript";

  4. 在html5当中是不需要写这个type的，在严谨的浏览器，需要写上，在不兼容的时候，写上两个都是可以的；

  5. 不要在引入js的标签里面写任何js代码，可能导致文件js文件加载异常；

  6. 如果script标签放在html后面，浏览器会自动放进body中的内容最后面；

  7. 变量的命名规则

  8. 不能有中划线，需要使用驼峰命名

  9. 严格区分大小写

  10. 可以以$符和下划线开头，不能以数字开头

  11. 不能使用保留字和关键字

  12. 起有意义的变量名

  13. 关键字，浏览器当中标签名字也就是关键字，比如script，var；

  14. 进制

以0开头的值为进制，16进制以0x开头，默认是十进制

八进制：遇八进1，十六进制，遇十六进1；

例如：07，表示八进制的7, 10，表示八进制的8；

0xa 表示十六进制的10；

  1. 变量

变量声明，有var，有变量名字，没有值；

变量初始化，有var，有变量名字有值；

var num=10

可以说是声明变量并初始化--变量的初始化--声明变量赋值；

  1. 声明变量的方式

先声明，后赋值 var a; a=12;

声明并赋值：var a=12;

声明多个变量时：var x,y,z; x=1;y=2;z=3;或var x=1,y=2,z=3；

声明多个值相同的变量时 var a=b=c=12，只有第一个有var。

只声明不负值时，变量为undefined;

变量名不能重复声明，后声明的会覆盖掉前面的声明；

  1. 变量交换：

  2. 借助第三个变量交换；

var n=a;
a=b;
b=n;
  1. 相加：一般适用于数字交换；
a=a+b;
b=a-b;
a=a-b;

四、简单交互

  1. 找到谁

通过id名获取元素：document.getElementById("box");

  1. 干什么：

document.getElementById("box").onclick = function(){}

通过(by)id获取(get)元素(Element)并声明变量。

  1. 结果是什么：

document.getElementById("box").onclick = function(){alert(1);}

四、获取元素

  1. 通过标签名获取元素；

document.getElementsByTagName("");

获取到的都是类数组；当只有一个类名时，可以直接在括号后加中括号下标；

获取到数组中的某个具体标签需要加下标，从0开始；

  1. 通过类名获取元素（IE9+）

document.getElementsByClassName("");

获取之后也是类数组，

通过className获取的元素，属于；

  1. 从父元素通过标签名获取元素：

父元素.getElementsByTagName("类名");

父元素.getElementsByClassName("");

  1. 通过css选择器来获取元素；

document.querySelector("css选择器选择"); 返回的是一个

document.querySelectorAll("css选择器选择")； 返回的是一组；

比如：ul.querySelectorAll('[title^="3"]'); title属性以3开头的；

document也可以是父级元素；

括号获取和css选择器一样选择，兼容IE8+；

  1. 也可以通过window.id名 也可以获取；

  2. 现在通过给元素设置id名，可以直接调用事件，不需要获取了；

<button id='btn1'>按钮</button>
btn1.onclick = function(){
    consle.log('11111111111')
}

五、鼠标事件

元素.事件 = function(){}

元素.addEventListener('事件', handler)

  1. 单击事件， onclick，单击触发

  2. 双击事件， ondblclick，双击触发

  3. 移入， onmouseover，鼠标移入触发，移入子元素再次触发；

  4. 移入， onmouseenter，鼠标移入触发，移入子元素不触发，穿过子元素；

  5. 移出， onmouseout，当鼠标离开时会触发，移入子元素也触发离开；

  6. 移出 onmouseleave；移入子元素不触发离开；

  7. 移动 onmousemove；鼠标经过元素每一个点都会触发一次。

  8. 按下 onmousedown；鼠标按下会触发

  9. 抬起 onmouseup；鼠标松开会触发；和onmousedown组成一个完整的单击事件；

  10. 菜单 oncontextmenu；右键触发菜单；

六、操作内容

  1. 获取内容

元素.innerHTML 可以识别标签；

元素.innerText 不能识别标签，纯文本；

  1. 设置

变量.innerHTML = ""; 赋值

变量.innerText = ""; 赋值

七、表单操作内容

表单有三种，input,textarea,select。

  1. 获取

input.value; 获取的是value值；

textarea.value; 获取的是value值；

select.value；获取的是里面默认被选中的value值；

元素.checked=true；复选框被选中

  1. 设置

input.value = ""; 改变其中的内容

select.value = ""; 改变默认选中项；

八、操作元素属性

  1. 获取

    变量名.属性名。例如:a.href；

    获取类名时：变量名.className; 需要大写；

  2. 设置

    box.id = "obox";

    a.href = "http://baidu.com";

    img.src = "1.jpg"；js外部文件时路劲要以html文件来找；

九、操作元素样式

  1. 获取

    元素.style.属性值；只能获取行内样式；

  2. 设置

(1)元素.style.属性值 = "";（设置的样式也都是在行内样式）

属性值是font-size有中划线的时候，需要fontSize；去掉中划线，第二个单词首字母大写；

(2)元素.style.cssText = ""; 可以写多个样式；

(3)元素.style = ""; 可以写多个样式， //行间样式会全部替换掉；分号隔开;

常用: 元素.clssName，写一个类名，使用时添加类名

六、document.write()；

document.write() 和 innerHTML 的功能类似，操作标签的内容，但是 document.write() 只能操作 body 的内容。

document.write() 和 innerHTML 的区别：

  1. document.write() 可以识别标签。
  2. document.write() 会覆盖标签中已有的内容，但是不会覆盖 document.write() 添加的内容。
  3. document.write() 只能操作 body 的内容。
  4. document.write() == document.body.innerHTML。

document.writeln 与 document.write的区别：仅仅是writeln多了一个换行符

十、常用方法

  1. document.write(); 在页面添加内容。
  2. prompt()；打开浏览器弹窗输入；
  3. alert 弹窗
  4. console.log(内容) 输出到控制台
  5. +拼接符 可以将前后内容链接起来，组成一串完整的代码；
  6. javascript:void(0); 写在a标签里面，阻止浏览器刷新，#号也行，点击之后http地址自动多个#，并文字变色；

window.onload = function(){}

当前页面加载完之后再执行函数中的代码

可以将script写在body内容之上；

高频面试题：

● 什么是 JavaScript ？

● JavaScript 与 ECMAScript 的关系？

● 变量的命名规则？

● window.onload 的作用？

● document.write() 与 innerHTML 的区别？